<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
	xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/layui/css/layui.css">
<link rel="stylesheet" href="/css/custom.form.css">
<style>
    .box {
      width: 500px;
      height: 500px;
      margin: 10px;
    }

    .charts {
      width: 350px;
      height: 350px;
      border: 1px solid black;
      margin: 10px;
    }

    .titleBox {
      display: flex;
      width: 100%;
      height: 30px;
    }

    .title {
      width: 80%;
      height: 30px;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
    }
</style>

</head>


<body>
	
	<div class="panel panel-default operation1" hidden>
		<div class="panel-heading title"></div>
		<div class="layui-card-body">
			<form class="layui-form " action="" lay-filter="info" style="margin-top: 10px">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
					<legend>调查问卷信息</legend>
				</fieldset>
				
				<div class="layui-form-item">
					<label class="layui-form-label">标题</label>
					<div class="layui-input-inline">
						<input id="viewTitle" readonly="true" autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
					<legend>问卷问题内容</legend>
				</fieldset>
				
				<div id="viewSurvey"></div>
				
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn layui-btn-primary btn_cancel">返回</button>
					</div>
				</div>
				
			</form>
		</div>
	</div>
	
	<div class="operation2" hidden>
		<div id="searchParam">
			<div class="layui-form-item">
				<input id="surveyId" hidden>
				<div id="searchParam" shiro:hasPermission="tssq:survey:list">
					<div class="layui-form-item">
						<div class="layui-input-inline">
			            	 <select id="taxorgcode" class="layui-input" name="taxorgcode" lay-filter="select-type">
			                 	<option value="">请选择税务机关</option>
			                 </select>
			            </div>
		
						<div class="layui-input-inline ">
							<button class="layui-btn" onclick="search2()">查询</button>
							<button class="layui-btn" onclick="exportData()">导出文本</button>
							
						</div>
						<div class="layui-input-inline ">
							<button class="layui-btn" onclick="exportData1()">导出统计详情</button>
						</div>
						<div class="layui-input-inline ">
						 	<button class="layui-btn layui-btn-primary btn_cancel">返回</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="generateEchartsDiv">
		
		</div>
		
	</div>
	
	
	
	
	<div class="table_div">
		<div id="searchParam" shiro:hasPermission="tssq:survey:list">
			<div class="layui-form-item">
				<div class="layui-input-inline">
					<input type="text" id="key" class="layui-input" autocomplete="off"
						placeholder="请输入">
				</div>

				<div class="layui-input-inline ">
					<button class="layui-btn" onclick="search()" id="search">查询</button>
				</div>
			</div>

		</div>
		<table class="layui-table" id="showTable" lay-filter="showTable"></table>
	</div>
	
	<div class="table_div1" hidden>
		<div id="searchParam">
			<div class="layui-form-item">
				<!-- <div class="layui-input-inline">
					<input type="text" id="qzmc" class="layui-input" autocomplete="off"
						placeholder="请输入群组名称">
				</div> -->
				
				<!-- <input id="surveyId" hidden> -->
				
				<div class="layui-input-inline">
					<!-- <button class="layui-btn" onclick="search1()" id="search">查询</button> -->
					<button class="layui-btn layui-btn-primary btn_cancel">返回</button>
				</div>
				
			</div>

		</div>
		<table class="layui-table" id="showTable1" lay-filter="showTable1"></table>
	</div>
	
	
	<script type="text/html" id="tool">
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="view">纳税人详情</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="statistics">统计结果</a>
	</script>
	
	<script type="text/html" id="tool1">
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="view">查询结果</a>
	</script>
</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script type="text/javascript" src="/js/main/echarts.min.js"></script>
<script>
	//获取token
	var token = CoreUtil.getData("access_token");
	//地址栏转义token中的#号
	var tokenQuery = token.replace("#", "%23");
	var tableIns;
	var tableIns1;
	var table = layui.table;
	var form = layui.form;
	var layer = layui.layer;
	var $ = jQuery = layui.jquery;
	var laydate = layui.laydate;
	var _xh = 0;
	var _surveyArr = new Array();
	
	layui.use([ 'table', 'layer', 'laydate' ], function() {
		
		var map = {
				name : "taxOrgCode"
			};
			CoreUtil.sendPost("/sysDict/list", map, function (res) {
	        	if(res.code == 0){
	        		var _data = res.data;
	        		var str = "<option value=''>请选择税务机关</option>";
	        		for(var i in _data){
	        			var _value = _data[i].id;
	        			var _label = _data[i].label;
	        			str += "<option value="+_value+">"+_label+"</option>";
	        		}
                    
	        		$("#taxorgcode").html(str);
	        		
				}else{
					layer.msg(res.msg);
					return false;
				}
	        })
		
		
		//日期
		laydate.render({
		    elem: '#date'
		});
		
		//加载table
		tableIns = table.render({
			elem : '#showTable',
			contentType : 'application/json',
			headers : {
				"authorization" : token
			},
			page : true //开启分页
			,
			url : '/tssq/survey/group' //数据接口
			,
			method : 'POST',
			parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
				return {
					"code" : res.code, //解析接口状态
					"msg" : res.msg, //解析提示文本
					"count" : CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
					"data" : CoreUtil.isEmpty(res.data) ? null
							: res.data.records
					//解析数据列表
				}
			},
			cols : [ [ {
				align : 'center',
				width : 290,
				field : 'batch',
				title : '发送问卷批次号',
				sort : true,
				hide : true
			}, {
				align : 'center',
				width : 530,
				field : 'surveyTitle',
				title : '问卷标题',
				sort : true
			}, {
				align : 'center',
				width : 190,
				field : 'count',
				title : '发送纳税人数量',
				sort : true
			}, {
				align : 'center',
				width : 235,
				field : 'createTime',
				title : '发送日期',
				sort : true
			}, {
				align : 'center',
				width : 185,
				toolbar : "#tool",
				fixed : 'right',
				title : '操作'
			} ] ],
			
			toolbar : '#toolbar'
		});
		
		//表头工具
		table.on('toolbar(showTable)', function(obj) {
			switch (obj.event) {
			
			}
			;
		});
		//列操作
		table.on('tool(showTable)', function(obj) {
			var data = obj.data;
			switch (obj.event) {
				case 'view':
					$(".table_div").hide();
					$(".table_div1").show();
					$(".operation1").hide();
					$(".operation2").hide();
					$("#surveyId").val(data.id);
					
					var batch = data.batch;
					search1(batch);
					
				break;
				case 'statistics':
					$("#surveyId").val(data.surveyId);
					search2();
					
				break;	
			}
		});
		
		//加载grouptable
        tableIns1 = table.render({
            elem: '#showTable1'
            , contentType: 'application/json'
            , headers: {"authorization": token}
            , page: true //开启分页
            , url: '/tssq/survey/groupDetail' //数据接口
            , method: 'POST'
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                    "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                }
            }
            , cols: [
                [
                   
                    {field: 'djxh',align : 'center', title: '登记序号', sort: true},
                    {field: 'nsrmc',align : 'center', title: '纳税人名称', sort: true},
                    {field: 'nsrsbh',align : 'center', title: '纳税人识别号', sort: true},
                    {field: 'type',align : 'center', title: '是否填写', templet : function(row) {
						if (CoreUtil.isEmpty(row.feedback)) {
							return "未填写";
						} else{
							return "已填写";
						}
						
					},sort: true},
                    {align : 'center',toolbar: "#tool1", title: '操作'}
                ]
            ]
            , toolbar: '#toolbar1'
        });
		
      //列操作
		table.on('tool(showTable1)', function(obj) {
			var data = obj.data;
			switch (obj.event) {
				case 'view':
					if(CoreUtil.isEmpty(data.feedback)){
						layer.msg("此纳税人还未填写调查问卷！");
					};
					$("#viewTitle").val(data.surveyTitle);
					var arrMap = {
							djxh : data.djxh,
							surveyId : data.surveyId
					};
					
					CoreUtil.sendPost("/tssq/survey/feedBack",arrMap,function(data) {
						if(data.code == 0){
						 	var _data = data.data;
							var feedback = _data[0];
							var survey = _data[1];
							var viewSurveyTmp = "";
							for(var i in survey){
								var _optionsType = survey[i].optionsType;
								var _optionsTitle = survey[i].optionsTitle;
								var _id = survey[i].id;
								var ii = "";
								for(var _i in feedback){
									var _optionsId = feedback[_i].optionsId;
									if(_optionsId == _id){
										ii = _i;
									}
								}
								
								
								if(_optionsType == "1"){
									viewSurveyTmp += "<div class='layui-form-item'>";
									// 文本
									viewSurveyTmp += "<label class='layui-form-label'>"+_optionsTitle+"</label>"
								    	+"<div class='layui-input-block'>"
								    	+"<input readonly type='text' placeholder='"+feedback[ii].optionsFeedback+"' autocomplete='off' class='layui-input'>"
								    	+"</div>";
									viewSurveyTmp += "</div>";
									
								}else if(_optionsType == "2"){
									viewSurveyTmp += "<div class='layui-form-item'>";
									// 多选
									viewSurveyTmp += "<label class='layui-form-label'>"+_optionsTitle+"</label>"
												 +"<div class='layui-input-block'>";
									// var _options = survey[i].optionsConent;
									var _options = eval('(' + survey[i].optionsConent + ')');
									for (var _i in _options) { 
									// for(var _i = 0; _i < _options.length; _i++){
										viewSurveyTmp += "<input type='checkbox' name="+_options[_i][0]+" title="+_options[_i][0]+">"
													  + "<div class='layui-unselect layui-form-checkbox'><span>"+_options[_i][0]+"</span><i class='layui-icon layui-icon-ok'></i></div>";
									}
									viewSurveyTmp += "</div>";
									viewSurveyTmp += "</div>";
									var _optionsFeedback = eval('(' + feedback[ii].optionsFeedback + ')');
									viewSurveyTmp += "<div class='layui-form-item'>";
									viewSurveyTmp += "<label class='layui-form-label' style='color:red'>回馈</label>"
									 +"<div class='layui-input-block'>";
									for (var _ii in _optionsFeedback) { 
										viewSurveyTmp += "<input type='checkbox' name="+_optionsFeedback[_ii]+" title="+_optionsFeedback[_ii]+">"
													  + "<div class='layui-unselect layui-form-checkbox'><span>"+_optionsFeedback[_ii]+"</span><i class='layui-icon layui-icon-ok'></i></div>";
									}
									viewSurveyTmp += "</div>";
									
								}else if(_optionsType == "3"){
									viewSurveyTmp += "<div class='layui-form-item'>";
									// 单选
									viewSurveyTmp += "<label class='layui-form-label'>"+_optionsTitle+"</label>"
									 			+"<div class='layui-input-block'>";
									
									var _options = eval('(' + survey[i].optionsConent + ')');
									for (var _i in _options) {
										viewSurveyTmp += "<input type='radio' name='like[write]' value="+_options[_i][0]+" title="+_options[_i][0]+">"
													 + "<div class='layui-unselect layui-form-radio'><i class='layui-anim layui-icon'>o</i><div>"+_options[_i][0]+"</div></div>"
									};
									viewSurveyTmp += "</div>";
									
									viewSurveyTmp += "<div class='layui-form-item'>";
									viewSurveyTmp += "<label class='layui-form-label' style='color:red'>回馈</label><div class='layui-input-block'>";
									viewSurveyTmp += "<div class='layui-unselect layui-form-radio'><i class='layui-anim layui-icon'>o</i><div>"+feedback[ii].optionsFeedback+"</div></div>";
									viewSurveyTmp += "</div>";
								}
								
							}
							
							$("#viewSurvey").html(viewSurveyTmp);
							
							$(".table_div").hide();
							$(".table_div1").hide();
							$(".operation1").show();
							$(".operation2").hide();
							
						}else{
							layer.msg(data.msg);
						}
					});
					
				break;
			}
		});
		
		
		//返回
		$(".btn_cancel").click(function() {
			$(".table_div").show();
			$(".table_div1").hide();
			$(".operation1").hide();
			$(".operation2").hide();
			return false;
		});

	});

	//执行查询
	function search() {
		//这里以搜索为例
		tableIns.reload({
			where : { //设定异步数据接口的额外参数，任意设
				surveyTitle : $("#key").val()
			},
			page : {
				curr : 1
				//重新从第 1 页开始
			}
		});
	};
	
	
	//执行查询
	function search1(batch) {
		//这里以搜索为例
		tableIns1.reload({
			where : { //设定异步数据接口的额外参数，任意设
				batch : batch
			},
			page : {
				curr : 1
				//重新从第 1 页开始
			}
		});
	};
	

    /* let data = [{
        title: '图表1',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [15, 20, 25, 30, 35, 40, 45],
            type: 'bar'
          }
        },
        className: 'one'
      },
      {
        title: '图表2',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [100, 200, 220, 218, 135, 147, 260],
            type: 'line'
          }
        },
        className: 'two'
      },
      {
        title: '图表3',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [50, 30, 24, 18, 35, 17, 60],
            type: 'pie'
          }
        },
        className: 'three'
      }
    ] */

    function generateEcharts(data) {
    	$("#generateEchartsDiv").html("");
    	for (let i = 0; i < data.length; i++) {
    		// 1. 创建div(每个图表)
        	var Odiv = document.createElement("div"); 
			// Odiv.classList.add('box');
        	Odiv.classList.add('layui-col-sm4');
        	Odiv.classList.add('layui-col-md4');
        	Odiv.classList.add('layui-col-lg4');
        	
        	// 2. 创建标题的div
        	var titleBox = document.createElement("div");
        	Odiv.appendChild(titleBox)
        	titleBox.classList.add('titleBox')
        	// 2.1 设置图表标题
        	var title = document.createElement("div");
        	// title.innerText = data[i].title
        	titleBox.appendChild(title);
        	title.classList.add('title')
        	// 3. 设置图表的div 
        	var charts = document.createElement("div");
        	Odiv.appendChild(charts);
        	charts.classList.add('charts')
        	// 4. 将图表添加到body
        	document.body.appendChild(Odiv);
        	// 5. 图表配置
        	var myChart = echarts.init(charts);
        	var option;
        	var type = data[i].content.series.type;
        	if(type == "bar"){
        		var _sum = sum(data[i].content.series.data);
        		console.log(_sum);
        		option = {
        			title: {
          				text: data[i].title,
          				textAlign: 'center',
          				left: '50%',
   	       				textStyle: {
   	       		            color: '#666',
   	       		            fontWeight: 'bold',
   	       		            fontSize: '20px',
   	       		        },
          			},
          			color: _sum,
       				tooltip: {
       	                trigger: 'axis',
       	                axisPointer: {type: 'shadow'},
       	                // formatter:'数量{c}\n'
       	                formatter: function (params) {
       	                    var sl = params[0].data;
       	                 	var bfb = getPercent(params[0].data,params[0].color);
       	                    return '数量 '+sl+'\n 百分比'+bfb;
						},
       	
       	            },
       	            grid: {
       	                left: '5%',
       	                top: '15%',
       	                right: '10%',
       	                bottom: '5%',
       	                containLabel: true
       	            },
        			xAxis: {
                    	type: 'category',
                    	data: data[i].content.xAxis,
                    	axisLabel: {
                    		show: true, // 是否显示刻度标签，默认显示
                            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
                            rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
                            inside: false, // 刻度标签是否朝内，默认朝外
                            margin: 6, // 刻度标签与轴线之间的距离
                            formatter: '{value}' , // 刻度标签的内容格式器
                            fontSize : 10
                    	}
                  	},
                  	yAxis: {
                    	type: 'value'
                  	},
                  	series: [{
                  		type: 'bar',
                  		label : {
	                	　　　　normal : {
	                	　　　　　　label: {
	                        		fontWeight : 'normal',
		                	　　　　　  fontSize : 10　　　　//这是关键，在需要的地方加上就行了
	                    		}
	                	　　　　}
	                	},
	                	
	                    itemStyle: {
	                        normal: {
	                          /* color: function (colors) {
	                            var colorList = ['#fc8251','#CC00CC'];
	                            return colorList[colors.dataIndex];
	                          } */
	                        },
						},
	                	
						colorBy: 'data',
                  		data: data[i].content.series.data
                  	}]
                  	
                  	
                  	// data[i].content.series
				};
        	}else if(type == "pie"){
        		option = {
       				title: {
          				    text: data[i].title,
          				    textAlign: 'center',
          				    left: '50%',
   	       				textStyle: {
   	       		            color: '#666',
   	       		            fontWeight: 'bold',
   	       		            fontSize: '20px',
   	       		        },
          			},
       				tooltip: {
       					
       	                formatter:'数量{c}\n百分比({d}%)'
   		            },
   		            
   		            grid: {
   		            	left: '10%',
       	                top: '10%',
       	                right: '10%',
       	                bottom: '10%',
   		                containLabel: true
   		            },
   		            
        			series: [{
        				type: 'pie',
	                    radius: '65%',
	                    data: data[i].content.series.data,
	                  　　			label : {
	                	　　　　normal : {
	                	　　　　　　textStyle : {
	                	　　　　　　　　fontWeight : 'normal',
	                	　　　　　　　　fontSize : 10
	                	　　　　　　}
	                	　　　　}
	                	　　},
	                    itemStyle: {
	                        normal: {
	                          /* color: function (colors) {
	                            var colorList = ['#fc8251','#CC00CC'];
	                            return colorList[colors.dataIndex];
	                          } */
	                        },
	                    }
	                    
	                }]
				};
        	}
        	option && myChart.setOption(option);
        	$("#generateEchartsDiv").append(Odiv);
      	}
    }
    
    
    function search2(){
    	var arrMap = {
			surveyId : $("#surveyId").val(),
			taxorgcode : $("#taxorgcode").val(),
		};
			
		CoreUtil.sendPost("/tssq/survey/generateEcharts",arrMap,function(data) {
			if(data.code == 0){
				generateEcharts(data.data);
				
				$(".table_div").hide();
				$(".table_div1").hide();
				$(".operation1").hide();
				$(".operation2").show();
				
			}else{
				layer.msg(data.msg);
			}
		});
    }
    
    
    function exportData(){
    	var arrMap = {
    		surveyId : $("#surveyId").val(),
    		taxorgcode : $("#taxorgcode").val(),
    	};
    	
    	CoreUtil.sendPost("/tssq/survey/exportData",arrMap,function(data) {
			if(data.code == 0){
				var file = data.data[2];
				window.open(file,'_blank');
				
			}else{
				layer.msg(data.msg);
			}
		});
    	
    }
    
    function exportData1(){
    	var arrMap = {
        	surveyId : $("#surveyId").val(),
        	taxorgcode : $("#taxorgcode").val(),
		};
        	
       	CoreUtil.sendPost("/tssq/survey/exportData1",arrMap,function(data) {
   			if(data.code == 0){
   				var file = data.data[2];
   				window.open(file,'_blank');
   				
   			}else{
   				layer.msg(data.msg);
   			}
   		});
        	
	}
    
    
    function sum(arr){
   	  let total = 0
   	  arr.forEach(num=>{
   	    total += num
   	  })
   	  
      return total 
	}
    
    
    function getPercent(num, total){
   	  num = parseFloat(num);
   	  total = parseFloat(total);
   	  if (isNaN(num) || isNaN(total)) {
   	    return "-";
   	  }
   	  return total <= 0? "0%" : Math.round((num / total) * 10000) / 100.0 + "%";
	}
    	
</script>

